<template>
  <div class="table">
    <div class="container">
      <div class="handle-box el-table_p">
        <div class="selectBox">
          <div>
            <div> 关键字：</div>
            <div class="block">
              <el-input v-model="select_word" placeholder="输入关键字（姓名/用户名）" class="handle-input"></el-input>
            </div>
          </div>
          <!--<div>-->
            <!--<div> 选择状态：</div>-->
            <!--<div class="block">-->
              <!--<el-select v-model="selectValue" placeholder="请选择">-->
                <!--<el-option-->
                  <!--v-for="item in options"-->
                  <!--:key="item.value"-->
                  <!--:label="item.label"-->
                  <!--:value="item.value">-->
                <!--</el-option>-->
              <!--</el-select>-->
            <!--</div>-->
          <!--</div>-->
          <div>
            <div> 选择方案：</div>
            <div class="block">
              <el-select v-model="planValue" placeholder="请选择">
                <el-option v-if="planOptions.length>1"
                           v-for="item in planOptions"
                           :key="item.value"
                           :label="item.label"
                           :value="item.value">
                </el-option>
              </el-select>
            </div>
          </div>
          <div>
            <div> 选择时间段：</div>
            <div class="block">
              <el-date-picker
                v-model="timeFrame"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </div>
          </div>
          <div>
            <div></div>
            <div class="block">
              <el-button type="primary" @click="selectBtn">查询</el-button>
            </div>
          </div>
          <!--导出-->
          <!--<el-col :span="3">-->
          <!--<download-excel-->
          <!--class="export-excel-wrapper"-->
          <!--:data="orderList"-->
          <!--:fields="json_fields"-->
          <!--name="订单.xls"-->
          <!--&gt;-->
          <!--<el-button type="primary">导出Excel</el-button>-->
          <!--</download-excel>-->
          <!--</el-col>-->
        </div>

        <!--导出Excel-->


      </div>
    </div>
    <el-table class="el-table_p" size="mini" ref="multipleTable" :header-cell-style="{background:'#f4f3f9',color:'black',}"  border :data="orderList">
      <el-table-column width="80" prop="num" label="序号" align="center"></el-table-column>
      <el-table-column prop="userAccount" label="个人信息" align="">
        <template #default="scope">
          <div>
            学员姓名：{{ scope.row.userTrueName}}
          </div>
          <div>
            学员电话：{{ scope.row.phone}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="课程信息" align="">
        <template #default="scope">
          <div>
            课程名称：{{ scope.row.name}}
          </div>
          <div>
            开课日期：{{ scope.row.startDate.split(" ")[0]}}
          </div>

        </template>
      </el-table-column>
      <el-table-column prop="name" label="办理信息" align="">
        <template #default="scope">
          <div>
            逾期期数：第{{ scope.row.stage}}期
          </div>
          <div>
            <!--SumFromatAll-->
            <!--支付总金额：￥{{ scope.row.overdueAmount|filterPrice.SumFromatAll(scope.row.overdueAmount,scope.row.serviceFee,scope.row.delayShareAmount,scope.row.overdueAmount,that)}}-->
            支付总金额：￥{{ scope.row.amount|filterTotalSatge(scope.row.serviceFee,scope.row.delayShareAmount,scope.row.overdueAmount,that)}}

          </div>
          <div>
            学费：￥{{ scope.row.amount}}
          </div>
          <div>
            服务费：￥{{ scope.row.serviceFee}}
          </div>
          <div>
           均摊金额：￥{{ scope.row.delayShareAmount}}
          </div>
          <div>
            逾期违约金：￥{{ scope.row.overdueAmount}}
          </div>
        </template>
      </el-table-column>
      <!--<el-table-column prop="updateBy" label="修改人" align="center">-->
      <!--</el-table-column>-->
      <el-table-column prop="createTime" label="创建时间" align="center">
      </el-table-column>
      <el-table-column prop="remark" label="备注" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini"  class="template_btn" type="primary" @click="avgAmount(scope.row)">均摊</el-button>
          <el-button size="mini"  class="template_btn" type="success" @click="addOneMonth(scope.row)">延期</el-button>
          <!--<el-button size="mini" class="template_btn" type="danger" @click="closeOrderStage(scope.row)">关闭</el-button>-->
        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="均摊" :visible.sync="avgAmountVisible" width="84%" center>
      <el-table class="el-table_p" size="mini" ref="multipleTable" border :data="avgAmountArr" :header-cell-style="{background:'#f4f3f9',color:'black',}"  border>
        <!--<el-table-column type="selection" ></el-table-column>-->
        <el-table-column prop="id" label="订单编号" align="center">
        </el-table-column>
        <el-table-column prop="stage" label="期数" align="center">
        </el-table-column>
        <el-table-column prop="amount" label="订单金额(元)" align="center">
        </el-table-column>
        <el-table-column prop="serviceFee" label="订单服务费金额(元)" align="center">
        </el-table-column>
        <el-table-column prop="discount" label="订单折扣金额(元)" align="center">
        </el-table-column>
        <el-table-column prop="overdueAmount" label="逾期违约金(元)" align="center">
        </el-table-column>
        <el-table-column prop="delayShareAmount" label="均摊金额(元)" align="center">
        </el-table-column>
        <el-table-column prop="paymentTime" width="240" label="时间" align="">
          <template #default="scope">

            <div>
              支付时间：{{ scope.row.paymentTime}}
            </div>
            <div>
              还款日期：{{ scope.row.repaymentDate.split(" ")[0]}}
            </div>
            <div>
              推送时间：{{ scope.row.pushDate}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="smsFlag" label="短信发送" align="center">
          <template #default="scope">
            <template v-if="scope.row.smsFlag==0">
              {{"未发送"}}
              <!--<el-button size="mini" type="primary">未发送</el-button>-->
            </template>
            <template v-if="scope.row.smsFlag==1">
              {{"已发送提醒短信"}}
              <!--<el-button size="mini" type="primary">已发送提醒短信</el-button>-->

            </template>
            <template v-if="scope.row.smsFlag==2">
              {{"已发送逾期短信"}}
              <!--<el-button size="mini" type="primary">已发送逾期短信</el-button>-->
            </template>
            <!--订单状态：0:待审核,1:审核通过,2:已关闭-->
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.status==0">
              {{"待支付"}}
            </template>
            <template v-if="scope.row.status==1">
              {{"已支付"}}
            </template>
            <template v-if="scope.row.status==2">
              {{"支付逾期"}}
            </template>
            <template v-if="scope.row.status==3">
              {{"延期关闭"}}
            </template>
          </template>
        </el-table-column>
        <!--<el-table-column prop="updateBy" label="修改人" align="center">-->
        <!--</el-table-column>-->
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
      </el-table>
      <span slot="footer">
                <el-button size="mini" @click="avgAmountVisible = false">取消</el-button>
                <el-button size="mini" @click="affirmAvg" type="primary">确定</el-button>
            </span>
    </el-dialog>
    <el-dialog title="延期" :visible.sync="addOneMonthVisible" width="84%" center>
      <el-table class="el-table_p" size="mini" ref="multipleTable" border :data="addOneMonthArr" :header-cell-style="{background:'#f4f3f9',color:'black',}">
        <!--<el-table-column type="selection" ></el-table-column>-->
        <el-table-column prop="id" label="订单编号" align="center">
        </el-table-column>
        <el-table-column prop="stage" label="期数" align="center">
        </el-table-column>
        <el-table-column prop="amount" label="订单金额(元)" align="center">
        </el-table-column>
        <el-table-column prop="serviceFee" label="订单服务费金额(元)" align="center">
        </el-table-column>
        <el-table-column prop="discount" label="订单折扣金额(元)" align="center">
        </el-table-column>

        <el-table-column prop="delayShareAmount" label="均摊金额(元)" align="center">
        </el-table-column>
        <el-table-column prop="overdueAmount" label="逾期违约金(元)" align="center">
        </el-table-column>
        <el-table-column prop="paymentTime" width="240" label="时间" align="">
          <template #default="scope">

            <div>
              支付时间：{{ scope.row.paymentTime}}
            </div>
            <div>
              还款日期：{{ scope.row.repaymentDate.split(" ")[0]}}
            </div>
            <div>
              推送时间：{{ scope.row.pushDate}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="smsFlag" label="短信发送" align="center">
          <template #default="scope">
            <template v-if="scope.row.smsFlag==0">
              {{"未发送"}}
              <!--<el-button size="mini" type="primary">未发送</el-button>-->
            </template>
            <template v-if="scope.row.smsFlag==1">
              {{"已发送提醒短信"}}
              <!--<el-button size="mini" type="primary">已发送提醒短信</el-button>-->

            </template>
            <template v-if="scope.row.smsFlag==2">
              {{"已发送逾期短信"}}
              <!--<el-button size="mini" type="primary">已发送逾期短信</el-button>-->
            </template>
            <!--订单状态：0:待审核,1:审核通过,2:已关闭-->
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.status==0">
              {{"待支付"}}
            </template>
            <template v-if="scope.row.status==1">
              {{"已支付"}}
            </template>
            <template v-if="scope.row.status==2">
              {{"支付逾期"}}
            </template>
            <template v-if="scope.row.status==3">
              {{"延期关闭"}}
            </template>
          </template>
        </el-table-column>

        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
      </el-table>
      <span slot="footer">
                <el-button size="mini" @click="addOneMonthVisible = false">取消</el-button>
                <el-button size="mini" @click="affirmOneMonth" type="primary">确定</el-button>
            </span>
    </el-dialog>
    <el-dialog title="更改支付状态" :visible.sync="closeOrderVisible" width="84%" center>
      <el-table class="el-table_p" size="mini" ref="multipleTable" border :data="closeOrderArr">
        <!--<el-table-column type="selection" ></el-table-column>-->
        <el-table-column prop="id" label="订单编号" align="center">
        </el-table-column>
        <el-table-column prop="stage" label="期数" align="center">
        </el-table-column>
        <el-table-column prop="amount" label="订单金额(元)" align="center">
        </el-table-column>
        <el-table-column prop="serviceFee" label="订单服务费金额(元)" align="center">
        </el-table-column>
        <el-table-column prop="discount" label="订单折扣金额(元)" align="center">
        </el-table-column>
        <el-table-column prop="delayShareAmount" label="延期均摊金额(元)" align="center">
        </el-table-column>
        <el-table-column prop="paymentTime" width="240" label="时间" align="">
          <template #default="scope">

            <div>
              支付时间：{{ scope.row.paymentTime}}
            </div>
            <div>
              还款日期：{{ scope.row.repaymentDate}}
            </div>
            <div>
              推送日期：{{ scope.row.pushDate}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="smsFlag" label="短信发送" align="center">
          <template #default="scope">
            <template v-if="scope.row.smsFlag==0">
              {{"未发送"}}
              <!--<el-button size="mini" type="primary">未发送</el-button>-->
            </template>
            <template v-if="scope.row.smsFlag==1">
              {{"已发送提醒短信"}}
              <!--<el-button size="mini" type="primary">已发送提醒短信</el-button>-->

            </template>
            <template v-if="scope.row.smsFlag==2">
              {{"已发送逾期短信"}}
              <!--<el-button size="mini" type="primary">已发送逾期短信</el-button>-->
            </template>
            <!--订单状态：0:待审核,1:审核通过,2:已关闭-->
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <template v-if="scope.row.status==0">
              {{"待支付"}}
            </template>
            <template v-if="scope.row.status==1">
              {{"已支付"}}
            </template>
            <template v-if="scope.row.status==2">
              {{"支付逾期"}}
            </template>
            <template v-if="scope.row.status==3">
              {{"延期关闭"}}
            </template>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center">
        </el-table-column>
      </el-table>
      <span slot="footer">
                <el-button size="mini" @click="closeOrderVisible = false">取消</el-button>
                <el-button size="mini" @click="affirmCloseOrder" type="primary">确定</el-button>
            </span>
    </el-dialog>
  </div>
</template>
<script>
  import {overdueList, affirmCloseOrder, getPlanList,affirmAvg,affirmOneMonth} from '../../api/public/api';
  import {mixin} from '../../../static/js/index';



  export default {
    mixins: [mixin],
    // components:{
    //   orderStage
    // },
    data() {
      return {
        that:this,
        level: 0,
        orderList: [],
        id: "",
        delVisible: false,
        detailVisible: false,//删除弹窗是否显示
        json_fields: {
          "订单": 'odcoursename',//表格内容

        },
        allNopaymerntAmout: 0,       //
        allPaymerntAmout: 0,           //
        id: 0,
        select_word: "",
        // options: [
        //   {
        //     value: -1,
        //     label: '全部'
        //   },
        //   {
        //     value: 0,
        //     label: '待审核'
        //   },
        //   {
        //     value: 1,
        //     label: '审核通过'
        //   },
        //   {
        //     value: 2,
        //     label: '已关闭'
        //   }],
        // selectValue: -1,
        timeFrame: "",//时段
        update_orderList: [],
        planOptions: [
          {
            value: -1,
            label: '全部'
          }],
        planValue: -1,
        avgAmountVisible: false,//均摊弹框
        avgAmountArr:[],//均摊订单
        orderDataArr:[],//顶部数据
        addOneMonthArr:[],
        addOneMonthVisible:false,
        closeOrderVisible:false,
        closeOrderArr:[]
      }
    },

    created() {
      let data = {}
      this.getData(data);

      this.level = localStorage.getItem('level')

    },
    mounted(){
      this.getPlan()
    },
    filters: {
      // 修改时间格式

      // 修改支付计划 -显示tital格式
      // 修改支付计划 -显示tital格式
      filterTotalSatge( amount, serviceFee, delayShareAmount,overdueAmount, that) {
        console.log(amount, serviceFee, delayShareAmount,overdueAmount,that)
        let totalAmount = ''
        totalAmount = that.$math.subtract(
          that.$math.add(that.$math.bignumber(amount), that.$math.bignumber(serviceFee),that.$math.bignumber(delayShareAmount),that.$math.bignumber(overdueAmount)),
         0
        );
        // getBackDate = getBackDate.substring(0, 10)
        return  totalAmount
      }
    },
    methods: {
      // //表头行的设置
      tableHeaderColor({row,column,rowIndex,columnIndex}){
        return 'background-color:#fff;font-wight:500;font-size:13px;text-align:center;height:50px'
      },
      selectBtn() {
        let data = {}
        if (this.select_word) {
          data.userAccount = this.select_word
        }

        if (this.planValue != -1) {
          data.planId = this.planValue.toString()
        }
        if (this.timeFrame) {
          data.createTime = this.timeFrame[0]
          data.queryEndTime = this.timeFrame[1]
        }

        this.getData(data);
      },
      updateData() {
        let data = {}
        this.getData(data);
      },
      //查询方案
      getPlan() {
        let data = {}
        getPlanList(data).then(res => {
          if (res.data.code == 0) {
            let result = res.data.data.records
            for (let i in result) {
              let obj = {}
              obj['value'] = result[i].id
              obj['label'] = result[i].planName
              this.planOptions.push(obj)

            }
            // this.notify("查询成功", "success");
          }else {
            // this.notify("查询失败", "error");
          }
        })
      },
      //查询所有订单
      getData(data) {
        overdueList(data).then(res => {
          if (res.data.code == 0) {
            // res.data.data.records.sort(function(a,b){
            //   return a.createTime - b.createTime;
            // })
            let num=1
            res.data.data.map(item => {
              item.num = num++
              item.amount=parseFloat(item.amount).toFixed(2)
              item.serviceFee=parseFloat(item.serviceFee).toFixed(2)

              item.discount=parseFloat(item.discount).toFixed(2)

              item.delayShareAmount=parseFloat(item.delayShareAmount).toFixed(2)
            })
            this.orderList = res.data.data
            console.log(this.orderList)
          }
        })
      },

      // avgAmount 均摊
      avgAmount(row){
        this.avgAmountArr=[]
        this.avgAmountArr.push(row)
        this.avgAmountVisible=true

      },
      affirmAvg(){
        let data={
          "id":this.avgAmountArr[0].id,
          "orderId":this.avgAmountArr[0].orderId
        }
        affirmAvg(data).then(res=>{
          console.log(res)
          if(res.data.code==0){
            this.getData(this.id);
            this.avgAmountVisible=false
            this.notify("均摊", "success");
          }else {
            this.notify(res.data.msg, "error");
          }
        })
      },
      // addOneMonth 延期
      addOneMonth(row){
        this.addOneMonthArr=[]
        this.addOneMonthArr.push(row)
        this.addOneMonthVisible=true

      },
      affirmOneMonth(){
        let data={
          "id":this.addOneMonthArr[0].id,
          "orderId":this.addOneMonthArr[0].orderId
        }
        affirmOneMonth(data).then(res=>{
          console.log(res)
          if(res.data.code==0){
            this.getData(this.id);
            this.addOneMonthVisible=false
            this.notify("延期", "success");
          }else {
            this.notify(res.data.msg, "error");
          }
        })
      },


      //关闭订单 修改成关闭 即表示已支付
      closeOrderStage(row) {
        this.closeOrderArr=[]
        this.closeOrderArr.push(row)
        this.closeOrderVisible=true
      },
      affirmCloseOrder(){
        let data={
          "id":this.closeOrderArr[0].id,
          "orderId":this.closeOrderArr[0].orderId,
          "status":1//1改订单已支付
        }
        affirmCloseOrder(data).then(res=>{
          if(res.data.code==0){
            this.getData(this.id);
            this.closeOrderVisible=false
            this.notify("关闭成功", "success");
          }else {
            this.notify("关闭失败", "error");
          }
        })
      }


    }
  }
</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }



  .template_btn {
    margin-bottom: 10px !important;
    margin-left: 0 !important;
  }
</style>
